<template>
	<view class="page">
		<!-- 订单跟踪 wwl -->
		<view  v-if="info && info.status == 200 && info.s_staus == 1">
			{{info.data}}
		</view>
		<block v-else>
			<view class="top_box" v-if="info && info.status == 200">
				<view class="row">
					<view class="left">
						配送企业
					</view>
					<view class="right">
						{{info.title}}
					</view>
				</view>
				<view class="row" @click='onCapy(info.nu)'>
					<view class="left">
						运单编码
					</view>
					<view class="right">
						{{info.nu}} <view class="btn" ><text>复制</text></view>
					</view>
				</view>
				<view class="row">
					<view class="left">
						订单状态
					</view>
					<view class="right">
						{{statusList.find(x=>x.id == info.state) ? statusList.find(x=>x.id == info.state).name : ''}}
					</view>
				</view>
			</view>
			<view class="info_list" v-if='info && info.data && info.data.length > 0'>
				<view class="row" v-for="(row,i) in info.data" :key='i' :class='i == 0 ? "active":""'>
					<view class="left" >
						<text class="il">
						</text>
						<text class="ic">
						</text>
					</view>
					<view class="right">
						<view class="title">
							{{row.context}}
						</view>
						<view class="time">
							{{row.time}}
						</view>
					</view>
				</view>
			</view>
			
		</block>
		<empty v-if='!info  || ( info.status != 200 && !loading)' :text='info && info.status != 200 ? "暂无数据":"暂无数据"'/>
	</view>
</template>

<script>
	import { getLogisticsProgress } from "../static/api.js"
	export default{
		data(){
			return{
				info:null,
				id:null,
				loading:false,
				statusList:[
					{id:'0',name:'在途'},
					{id:1,name:'揽收'},
					{id:2,name:'疑难'},
					{id:3,name:'签收'},
					{id:4,name:'退签'},
					{id:5,name:'派件'},
					{id:6,name:'退回'},
					{id:7,name:'转单'},
					{id:10,name:'待清关'},
					{id:11,name:'清关中'},
					{id:12,name:'已清关'},
					{id:13,name:'清关异常'},
					{id:14,name:'拒签'},
					
				]
				// 快递单当前状态，包括0在途，1揽收，2疑难，3签收，4退签，5派件，6退回，7转单，10待清关，11清关中，12已清关，13清关异常，14拒签等36个状态
			}
		},
		methods: {
			onCapy(text){
				uni.setClipboardData({
				    data: text,
				    success:  ()=> {
						uni.showToast({title:"复制成功",icon:"none"})
				    }
				});
			},
			async getInfo(){
				uni.showLoading()
				this.loading = true
				try{
					var  res = await getLogisticsProgress({id:this.id})
					this.info = res
					uni.hideLoading()
					this.loading = false
				}catch{
					this.loading = false
					uni.hideLoading()
				}
				// this.list = [
				// 	{title:'商家正在通知快递公司揽件',time:'2021-04-01 12: 99 : 00'},
				// 	{title:'这是快递物流信息这是快递物流信息这是快递物流信息',time:'2021-04-01 12: 99 : 00'},
				// 	{title:'这是快递物流信息这是快递物流信息这是快递物流信息',time:'2021-04-01 12: 99 : 00'},
				// 	{title:'这是快递物流信息这是快递物流信息这是快递物流信息',time:'2021-04-01 12: 99 : 00'},
				// 	{title:'这是快递物流信息这是流信息',time:'2021-04-01 12: 99 : 00'},
				// 	{title:'这是快递物流信息这是流信息',time:'2021-04-01 12: 99 : 00'}
				// ]
			}
		},
		onLoad(params){
			this.id = params.id
			this.getInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.top_box{
		margin: 20rpx auto;
		padding:28rpx 36rpx ;
		box-sizing: border-box;
		width: 678rpx;
		border: 2rpx solid #fb7a32;
		border-radius: 16rpx;
		.row{
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			color:#26252A;
			line-height: 40rpx;
			.left{
				width: 6em;
			}.right{
				width: calc(100% - 6em);
				.btn{
					margin-left: 16rpx;
					display: inline-block;
					width: 48rpx;
					height: 32rpx;
					background: #ff0000;
					border-radius: 8rpx;
					text{
						display: inline-block;
						font-size: 24rpx;
						transform: scale(0.8);
					}
					color:#fff;
					line-height: 32rpx;
					text-align: center;
				}
			}
		}
	}
	.info_list{
		width: 100%;
		box-sizing: border-box;
		padding: 60rpx 24rpx 20rpx 70rpx ;
		.row{
			position: relative;
			display: flex;
			.il{
				position: absolute;
				background-color: #EAEAEA;
				width: 3rpx;
				left: 0 ;
				height: 100%;
			}
			.ic{
				position: absolute;
				width: 22rpx;
				height: 22rpx;
				background: #ebebeb;
				border-radius: 50%;
				left: -11rpx;
				top:50%
			}
			&:first-child{
				.ic{
					top:0;
				}
			}
			.left{
				width: 88rpx;
			}
			.right{
				width: 100%;
				box-sizing: border-box;
				padding: 30rpx 0 30rpx 0 ;
				border-bottom: 1rpx solid #e8e8e8;
				font-size: 26rpx;
				color:#999999;
				view{
					line-height: 26rpx;
					&:last-child{
						margin-top: 16rpx;
					}
				}
			}
			&:last-child{
				.il{
					height: 50%;
				}
			}
		}
		.active{
			.right{
				padding-top: 0 ;
				color:$theme;
			}
			.ic{
				border-radius: 50%;
				filter: blur(2px);
				background-color: $theme;
			}
		}
	}
</style>
